import { observer } from "mobx-react";
import "@/App.css";
import useStores from "@/hook/useStore";
import { Link } from "react-router-dom";
import { Routers as RouterView } from "@/routers/index";

const App = observer(() => {
  const { todoStore, testStore } = useStores();
  return (
    <div className="App">
      <p>{todoStore.getCounter}</p>
      <p>{testStore.testTitle}</p>
      <div>
        <button onClick={() => todoStore.increment()}>Increnemt</button>
        <button onClick={() => todoStore.reset()}>Reset</button>
        <button onClick={() => testStore.setTitle("123456")}>Set title</button>
        <div>
          <Link to="/">Home Page</Link>
          <Link to="/about">About Page</Link>
        </div>
      </div>
      <RouterView />
    </div>
  );
});

export default App;
